<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            //内部插入--->子节点
            $(".append").click(function () {
                //append追加  子节点后面 
                $("ul").append("<li>列表 append</li>");
                //appendTo  子节点后面添加
                // $("<li>列表 append</li>").appendTo($("ul"));
            })
            $(".prepend").click(function () {
                //prepend  子节点前面
                $("ul").prepend("<li>列表 prepend</li>");
                //prependTo 子节点前面
                // $("<li>列表 prepend</li>").prependTo($("ul"));
                
            })

            //外部插入--->兄弟节点
            $(".before").click(function () {
                // before ul外面的上面
                $("ul").before("<li>列表 append</li>");
            })
            $(".after").click(function () {
                //after ul外面的下面
                $("ul").after("<li>列表 append</li>");
            })

            //包裹--->父节点
            $(".wrap").click(function () {
                //wrap 包裹住整个ul
                $("ul").wrap("<div style='color:red'></div>");
            })

            //替换  修改
            $(".replaceWith").click(function () {
                //wrap 包裹住整个ul
                $("li:first").replaceWith("<li>列表 new</li>");
            })

            //删除
            $(".empty").click(function () {
                //empty 清空内容
                $("li:first").empty();
            })
            $(".remove").click(function () {
                //remove 删除  全部删除
                $("li:first").remove();
            })

            //克隆/复制
            $(".clone").click(function () {
                //clone 克隆/复制
                $("li:first").clone().appendTo("ul");
            })

            //事件
            // $("li").click(function () {
            //     console.log($(this).text());
            // })

            // $("ul").on("click","li",function () {
            //     console.log($(this).text());
            // })
            
            $("ul").on("click dblclick","li",function () {
                console.log($(this).text());
            })


        })
    </script>
</head>
<body>
    <button class="append">append</button>
    <button class="prepend">prepend</button>
    <br>
    <button class="before">before</button>
    <button class="after">after</button>
    <br>
    <button class="wrap">wrap</button>
    <br>
    <button class="replaceWith">replaceWidh</button>
    <br>
    <!-- //empty清空 -->
    <button class="empty">empty</button>
    <button class="remove">removremovee</button>
    <br>
    <button class="clone">clone</button>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
</body>
</html>